<template>
   <div>

      <el-dialog :title="Info.isAdd ? '添加会员' : '编辑会员'" :visible.sync="Info.isShow" center :before-close="del">
         <el-form :model="memberFrom" :rules="rules" ref="menuRef">
            <!-- 3手机号 -->
            <el-form-item prop="phone" label="手机号" :label-width="formLabelWidth">
               <el-input v-model="memberFrom.phone" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 1 -->
            <el-form-item prop="nickname" label="昵称" :label-width="formLabelWidth">
               <el-input v-model="memberFrom.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 2 -->
            <el-form-item label="密码" :label-width="formLabelWidth">
               <!-- v-model="loginFrom.password" -->
               <el-input suffix-icon="el-icon-burger" v-model="memberFrom.password" clearable></el-input>
               <p>留空则不修改</p>
            </el-form-item>
            



            <el-form-item label="开关" :label-width="formLabelWidth">
               <el-switch v-model="memberFrom.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                  :inactive-value="2">
               </el-switch>
            </el-form-item>

         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button @click="del">取 消</el-button>
            <el-button @click="ok" type="primary">确 定</el-button>
         </div>
      </el-dialog>
   </div>
</template>
  
<script>
import { memberInfo,memberEdit } from '../../request/api'
export default {
   props: ['Info'],
   data() {
      return {
         //参数名说明uid 会员 编号，必填项nickname昵称phone手机号password密码status状态1正常2禁用
         formLabelWidth: '120px',
         memberFrom: {
            nickname: '',//会员 名称
            phone: '',
            password: '',
            status: 1,//状态1正常2禁用number
         },
         rules: {
            phone: [
               { required: true, message: '请输入手机号', trigger: 'blur' },
               { min: 2, max: 8, message: '长度在2到8个字符', trigger: 'blur' }
            ],
            nickname: [
               { required: true, message: '请输入会员名称', trigger: 'blur' },
               { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
            ],
            password: [
               { required: true, message: '请输入密码', trigger: 'blur' },
               { min: 2, max: 8, message: '长度在6到16个字符', trigger: 'blur' }
            ],
         }
      };

   },
   mounted() {
      // 减少对服务端发起请求，如何实现？ 判断菜单列表是否存在
      if (this.$store.getters["member/getMemberList"].length == 0) {
         //调用菜单行动
         this.$store.dispatch("member/changeMemberAction");
         // console.log('menu/getMem',111);
      }
   },
   methods: {
      del() {
         this.$emit('del', false);
         this.reset();
      },
      reset() {

         this.memberFrom = {
            nickname: "", //会员名称string
            phone: '',
            password: '',
            status: 1, //状态1正常2禁用number
         };
         this.$refs.menuRef.resetFields(); //规则验证
         //清空树节点的选中状态
         // this.$refs.tree.setCheckedKeys([]);
      },
      //封装数据回显的方法
      async lookup(uid) {
         let res = await memberInfo({ uid });
         console.log(res);
         this.memberFrom = res.list;
         this.memberFrom.password = ''
         /* 
           后端返回的角色权限menus的数据类型是字符串 格式：‘1,2,3,4’ 
           而当前tree组件需要的数据格式是数组： [1,2,3,4]    
         */
         // this.$refs.tree.setCheckedKeys(this.memberFrom.menus ? this.memberFrom.menus.split(',') : []);
      },
      //确认
      ok() {
         //判断  
         this.$refs.menuRef.validate((val) => {
            if (val) {
               // 1，添加
               // this.memberFrom.menus = this.$refs.tree.getCheckedKeys().join(",");

               if (this.Info.isAdd) {

                  // roleAdd(this.memberFrom).then((res) => {

                  //    if (res.code == 200) {
                  //       // console.log(res);
                  //       this.$message.success(res.msg);
                  //       //关闭弹框
                  //       this.del();
                  //       //获取列表
                  //       this.$store.dispatch("member/changeMemberAction");
                  //    } else {
                  //       this.$message.error(res.msg);
                  //    }

                  //    // console.log(res, '教的');
                  // })


                  // console.log(this.memberFrom, '11111111111111');
               } else {
                  // 2，编辑
                  memberEdit(this.memberFrom).then((res) => {

                     if (res.code == 200) {
                        // console.log(res);
                        this.$message.success(res.msg);
                        //关闭弹框
                        this.del();
                        //获取列表
                        this.$store.dispatch("member/changeMemberAction");
                     } else {
                        this.$message.error(res.msg);
                     }

                     // console.log(res, '教的');
                  })
               }
            }

         })
      }
   }
};
</script>
  
<style lang="scss" scoped></style>